import { Content } from 'antd/es/layout/layout';
import { CSSProperties, forwardRef, useEffect, useState } from 'react';
import { Outlet, useLocation } from 'react-router-dom';
import Logo from '@/assets/icons/ic-logo-mini.svg';
import LogoPermission from '@/assets/images/permission-logo.png';

import { useSettings } from '@/store/settingStore';
import { useResponsive } from '@/theme/hooks';

import { NAV_WIDTH, NAV_COLLAPSED_WIDTH, HEADER_HEIGHT, MULTI_TABS_HEIGHT } from './config';
import MultiTabs from './multi-tabs';
import { MultiTabsProvider } from './multi-tabs/multi-tabs-provider';

import { StorageEnum, ThemeLayout } from '@/types/enum';
import { WebSocketProvider } from '@/hooks/use-websocket';

import LicenseBanner from './license-banner';
import useWindowWidth from '@/hooks/event/use-window-width';
import { useConfig, useConfigActions, useInitializeData } from '@/store/configStore';

import { Helmet } from 'react-helmet-async';
import { getItem } from '@/utils/storage';
import { useOrchestrationStore } from '@/store/orchestrationStore';

const { VITE_LICENSE_FLAG: LICENSEFLAG } = import.meta.env;
const licenseFlag = LICENSEFLAG === 'true' ? true : false;

type Props = {
  offsetTop?: boolean;
};
const Main = forwardRef<HTMLDivElement, Props>(({ offsetTop = false }, ref) => {
  const initializeData = useInitializeData();
  const { isPc } = useWindowWidth();

  // const { title  } = useConfig();
  const location = useLocation();
  // const getPageTitle = () => {
  //   if (location.pathname === '/apps/permission-manage') {
  //     return '权限管理平台';
  //   }
  //   return title;
  // };

  // const pageTitle = getPageTitle();

  const [pageTitle, setPageTitle] = useState<string>(() => {
    return location.pathname === '/apps/permission-manage'
      ? '权限管理平台'
      : getItem(StorageEnum?.Config)?.title || '';
  });

  useEffect(() => {
    const title = getItem(StorageEnum?.Config)?.title;
    const newTitle = location.pathname === '/apps/permission-manage' ? '权限管理平台' : title;
    setPageTitle(newTitle || '');
  }, [location.pathname, getItem(StorageEnum?.Config)]);

  // const { fetchInitialInfo } = useConfigActions();
  // useEffect(() => {
  //   const init = async () => {
  //     fetchInitialInfo();
  //   };
  //   init();
  // }, []);

  const { themeStretch, themeLayout, multiTab } = useSettings();
  const { screenMap } = useResponsive();

  const mainStyle: CSSProperties = {
    // paddingTop: HEADER_HEIGHT + (multiTab ? MULTI_TABS_HEIGHT : 0),
    paddingTop: 0,
    transition: 'padding 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
    width: '100vw',
    backgroundColor: '#F3F5F9',
    overflow: 'scroll',
  };
  // if (themeLayout === ThemeLayout.Horizontal) {
  //   mainStyle.width = '100vw';
  //   // mainStyle.paddingTop = multiTab ? MULTI_TABS_HEIGHT : 0;
  // } else if (screenMap.md) {
  //   mainStyle.width = `calc(100% - ${
  //     themeLayout === ThemeLayout.Vertical ? NAV_WIDTH : NAV_COLLAPSED_WIDTH
  //   })`;
  // } else {
  //   mainStyle.width = '100vw';
  // }

  const { appName, appLogo } = useOrchestrationStore();

  return (
    <Content
      ref={ref}
      style={mainStyle}
      className="flex flex-shrink-0 overflow-auto [-ms-overflow-style:none] [scrollbar-width:none]"
    >
      {/* <Helmet>
        <title>天工睿核智能体</title>
        <link rel="icon" href="/favicon.ico"></link>
      </Helmet> */}
      <Helmet>
        <title>{appName || ''}</title>
        {/* <link rel="icon" type="image/png" href={appLogo ? `${appLogo}?v=${Date.now()}` : ''} className='rounded-[50%]' /> */}
        <link rel="icon" href={appLogo} className="rounded-[50%]" />
      </Helmet>
      <div className={`m-auto h-full w-full flex-grow ${themeStretch ? '' : 'xl:max-w-screen-xl'}`}>
        {/* {(licenseFlag && initializeData.is_license_valid !== undefined && !initializeData?.is_license_valid && isPc) && <LicenseBanner />} */}
        <Outlet />
      </div>
    </Content>
  );
});

export default Main;
